<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="14" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" />{{sysUserName}}<i class="el-icon-arrow-down"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu class="el-menu-vertical-demo">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-menu-img el-icon-menu-img2"></i>
							<span>人事结构</span>
						</template>
						<el-menu-item-group>
							<router-link to="/Users">用户</router-link>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</aside>
			<section class="content-container">
				<el-col class="content-wrapper">
					<router-view></router-view>
				</el-col>
			</section>
		</el-col>
	</el-row>
</template>

<script>
    export default {
        data() {
            return {
                sysName:'实现前后端分离Demo',
                collapsed:false,
                sysUserName: '',
                sysUserAvatar:'',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }

            }
        },
        methods: {
            reverseH:function () {
                alert(111)
            },
            onSubmit() {
                console.log('submit!');
            },
            handleopen() {
                console.log('handleopen');
            },
            handleclose() {
                console.log('handleclose');
            },
            handleselect: function (a, b) {
            },
            //退出登录
            logout: function () {
                var _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem('user');
                    _this.$router.push('/login');
                }).catch(() => {

                });


            },
            //折叠导航栏
            collapse:function(){
                this.collapsed=!this.collapsed;
            },
            showMenu(i,status){
                this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
            },

        },
        mounted() {

            var user = sessionStorage.getItem('user');
            if (user) {
                user = JSON.parse(user);
                this.sysUserName ='系统管理员';
                this.sysUserAvatar = '../../static/user.png';
            }

        }
    }

</script>

<style scoped>
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		overflow: hidden;
	}
	.container .header {
		height: 51px;
		line-height:51px;
		background: -webkit-linear-gradient(#FFFFFF, #E6E9EC); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#FFFFFF, #E6E9EC); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#FFFFFF, #E6E9EC); /* Firefox 3.6 - 15 */
		background: linear-gradient(#FFFFFF, #E6E9EC); /* 标准的语法 */
		color:#fff;}
	.container .header .userinfo {
		text-align: right;
		padding-right: 35px;
		float: right;}
	.container .header .userinfo	.userinfo-inner {
		cursor: pointer;
		color:#555555;}
	.container .header .userinfo	.userinfo-inner img {
		width: 33px;
		height: 33px;
		border-radius: 20px;
		margin: 8px 16px 8px 0px;
		float: left;
	}
	.container .header .userinfo	.userinfo-inner i{
		float: right;
		margin: 18px 0px 18px 10px;
		font-size: 12px;
	}
	.el-menu-item{
		color:#ffffff;
	}
	.logo {
		height:51px;
		font-size: 24px;
		padding-left:20px;
		padding-right:20px;
		color:#044F93;}
	.logo img {
		width: 33px;
		float: left;
		margin: 10px 10px 10px 18px;
	}
	.logo .txt {
		color:#fff;}
	.year{
		padding-top: 7px;
	}
	.logo-collapse-width{
		width:60px
	}
	.tools{
		padding: 0px 23px;
		width:14px;
		height: 60px;
		line-height: 60px;
		cursor: pointer;
	}
	.main {
		display: flex;
		flex-flow:row;
		position: absolute;
		top: 51px;
		bottom: 0px;
		overflow: hidden;
		background-color:#172333;
	}
	.main aside {
		flex:0 0 221px;
		background-color:#172333;
		overflow: hidden;
		width: 221px;}
	.main aside:hover {
		overflow-y: scroll;
		overflow-x:hidden;
	}
	.main aside::-webkit-scrollbar {
		width:5px;
		height:10px;
	}
	.main aside::-webkit-scrollbar-button    {
		background:none;
	}
	.main aside::-webkit-scrollbar-track     {
		background:none;
	}
	.main aside::-webkit-scrollbar-thumb{
		background:#034c93;
		border-radius:4px;
	}
	.main aside::-webkit-scrollbar-corner {
		background:#034c93;
	}
	.main aside  .el-menu{
		height: 100%;
		background-color:#172333;
		width: 221px;
	}
	.menu-collapsed{
		flex:0 0 60px;
		width: 60px;
	}
	.menu-expanded{
		flex:0 0 221px;
		width: 221px;
	}
	.menu-collapsed .item{
		position: relative;
	}
	.menu-collapsed .submenu{
		position:absolute;
		top:0px;
		left:60px;
		z-index:99999;
		height:auto;
		display:none;
	}

	.content-container {
		flex:1;
		overflow-y:hidden;
		background-color: #fff}
	.content-container .breadcrumb-container .title {
		width: 200px;
		float: left;
		color: #475669;
	}
	.content-container .breadcrumb-container .breadcrumb-inner {
		float: right;
	}
	.content-wrapper {
		background-color: #fff;
		box-sizing: border-box;
		height: 100%;
	}
	.content-wrapper>.el-col-24{
		height: 100%;
	}
</style>